<template>
  <div class="main pl32 pt24 pr32">
    <div class="title space-between">
      <span class="ft16 fw6 fc-black">{{ title }}</span>
      <div class="align-row-center">
        <div class="mr24">
          <el-input type="input" v-model="searchName" placeholder="输入姓名开始搜索" @input="searchMember"></el-input>
        </div>
        <i class="icon ic_close" @click="closeFn"></i>
      </div>
    </div>
    <div class="content fc-black ft14">
      <div class="pt24 pb24">
        <el-checkbox v-model="all_checked" @change="handleCheckAllChange">{{$store.state.userInfo.companyName}}
        </el-checkbox>
      </div>
      <div class="scrollbar-y">
        <div class="lists" >
          <div class="list pt24" v-for="(item,index) in dataList" :key="index" v-if="item.userList != null && item.userList.length > 0">
            <el-checkbox-group v-model="item.bm_is_checked" @change="checkedBm(item)" >
              <div class="pb24">
                <el-checkbox :label="item.bm_checked">{{item.name}}</el-checkbox>
              </div>
              <div class="radio_list" v-if="item.userList != null && item.userList.length > 0">
                <el-checkbox-group v-model="item.user_list_checked" v-for="(item2,index2) in item.userList"
                                   @change="user_checked_fn(item)"
                                   :key="index2">
                  <el-checkbox class="pr48 pb24" :label="item2.userId">{{item2.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-btns pt8">
      <div class="save-btn" @click="callback">确定</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'messageBox',
    props: {
      indexClose: {
        type: String,
        default: 'close',
        required: false,
      },
      title: {
        type: String,
        default: '',
        required: false,
      },
      select: {
        type: Array,
        default: [],
        required: false,
      },
      search: {
        type: Object,
        default: function () {
          return {companyId: ''};
        },
        required: false,
      }
    },
    data() {
      return {
        all_checked: false,//是否全选
        searchName: '',
        timerIndex: '',
        dataList: [],
        bm_list_checked: [],//那些部门被选中的
        select_list:[],//选择的 执行人
      }
    },
    created() {
      this.search.companyId = this.$store.state.userInfo.companyId;
      this.select_list=this.select;
      console.log('回显的数据');
      console.log(this.select_list);
      this.getMemberList();
    },
    mounted() {

    },
    methods: {
      //关闭
      closeFn() {
        this.$emit("close", this.indexClose);
      },
      callback() {
        let checked_list=[];
        let _this=this;
        this.dataList.map(function (item,index) {
          item.user_list_checked.map(function (data) {
            checked_list.push(_this.getMemberObj(data));
          });
        });
        if(checked_list.length>0){
          this.$emit("callback", checked_list);
        }else {
          this.$message.error('请选择执行人');
        }

      },
      searchMember() {
        clearTimeout(this.timerIndex);
        this.timerIndex = setTimeout(() => {
          this.search.name = this.searchName;
          this.getMemberList();
        }, 1000);
      },
      //获取成员列表
      getMemberList() {
        this.$http.get('/user/department/user/list', {
          params: this.search
        }).then(res => {
          if (res.statusCode == 200) {
            res.data.map(function (item, index) {
              item.user_list_checked = [];
              item.bm_is_checked = false;
              item.indeterminate = false;
            });
            this.dataList = res.data || [];
            //回显数据
            if(this.select_list.length!=0){
              let select_list_id=[];
              this.select_list.map(function (item,index) {
                select_list_id.push(item.userId);
              });
              this.dataList.map(function (item) {
                item.userList.map(function (data) {
                  if(select_list_id.indexOf(data.userId)!=-1){
                    item.user_list_checked.push(data.userId)
                  }
                });
              })
            }
          } else {
            this.dataList = [];
          }
        }).catch(error => {
          console.log(error);
        });
      },
      getMemberObj(id) {
        let json = {};
        if (id != '' && id != 0 && this.dataList.length > 0) {
          this.dataList.forEach(item => {
            if (item.userList != null & item.userList.length > 0) {
              item.userList.forEach(item2 => {
                if (item2.userId == id) {
                  json = item2;
                  return json;
                }
              });
            }
          })
        }
        return json;
      },
      //选择该部门
      checkedBm(item) {
        if (item.bm_is_checked == true) {
          item.user_list_checked = [];
          item.userList.map(function (data, index) {
            item.user_list_checked.push(data.userId)
          });
          this.all_checked=true;
        } else {
          this.all_checked=false;
          item.user_list_checked = [];
        }

      },
      //选择执行人
      user_checked_fn(item) {
        if (item.userList.length == item.user_list_checked.length) {
          item.bm_is_checked = true;
          if (this.is_bm_all()) {
            this.all_checked = true;
          }
        } else {
          item.bm_is_checked = false;
          this.all_checked = false;
        }
      },
      //全选
      handleCheckAllChange() {
        if (this.all_checked) {
          //全选
          this.dataList.map(function (item, index) {
            item.bm_is_checked = true;
            item.user_list_checked = [];
            item.userList.map(function (data) {
              item.user_list_checked.push(data.userId);
            });
          });
        } else {
          //全不选
          this.dataList.map(function (item, index) {
            item.bm_is_checked = false;
            item.user_list_checked = [];
          });
        }
      },
      //判断部门是否全选了
      is_bm_all() {
        let is_bm_all = true;
        this.dataList.map(function (item) {
          if (!item.bm_is_checked) {
            is_bm_all = false;
          }
        });
        return is_bm_all;
      }
    }
  }
</script>

<style scoped lang="scss" type="text/scss">
  .main {
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 6px;
    width: 608px;
    height: 384px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;

    > .title {
      height: 32px;
    }

    > .content {
      .scrollbar-y {
        height: 200px;
        display: flex;
        flex-wrap: wrap;

        .lists {
          width: 100%;
          height: 100%;
          overflow-y: auto;

          &::-webkit-scrollbar {
            display: none
          }

          -ms-overflow-style: none; /* IE 10+ */
          scrollbar-width: none; /* Firefox */
          .list {
            border-top: 1px solid #eeeeee;

            .radio_list {
              display: flex;
              flex-wrap: wrap;
            }
          }
        }
      }
    }

    .modal-btns {
      display: flex;
      flex-direction: row-reverse;
    }

    .cancel-btn, .save-btn {
      display: inline-block;
      border-radius: 6px;
      width: 88px;
      line-height: 32px;
      text-align: center;
      cursor: pointer;
    }

    .save-btn {
      background-color: #0755db;
      color: #FFFFFF;
    }

    .cancel-btn {
      color: #b3c0c9;
    }
  }
</style>
<style lang="scss" type="text/scss">
  .title {
    .el-form-item__label {
      padding-right: 16px;
    }

    .el-input__inner, .el-textarea__inner {
      height: 32px;
      line-height: 32px;
      width: 260px;
      padding: 0 11px;
      background-color: #f2f6f9;
    }

    .el-date-editor--date, .el-date-editor--time {
      .el-input__inner {
        width: 176px;
      }
    }

    .el-input__inner:focus, .el-textarea__inner:focus {
      background-color: #FFFFFF;
    }

    .line-time {
      width: 20px;
    }
  }
</style>
